<!--  -->
<template>
  <div class="live">
    直播管理
    <div class="content">
      <div class="content-top">
        直播状态
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
        经纪人搜索
        <van-search v-model="search" @input="onSearch" placeholder="姓名" />
        <el-button type="primary" @click="handleSearch()">搜索</el-button>
      </div>
      <p>全部直播</p>
      <div class="content-bottom">
        <dl v-for="(item, idx) in list" :key="idx" class="list">
          <dt><img :src="item.img" alt="" /></dt>
          <dd>
            <p>{{ item.title }}</p>
            <p>
              <span>{{ item.name }}</span>
              <span>{{ item.date }}</span>
            </p>
            <p>
              <span @click="goLiveDetail(item)">进入直播</span>
              <el-switch
                v-model="item.flag"
                active-color="#36c6d3"
                active-value="true"
                inactive-value="false"
                @change="active_text($event, scope.row)"
              >
              </el-switch>
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { getLiveList } from "@/api";
import debounce from "../../../utils/debounce";
export default {
  // 组件状态值
  data() {
    return {
      flag: true,
      list: [],
      options: [
        {
          value: "选项1",
          label: "直播中",
        },
        {
          value: "选项2",
          label: "已结束",
        },
      ],
      value: "",
      search: "",
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    async getList() {
      const res = await getLiveList({ value: this.search });
      console.log(res);
      this.list = res.data.data;
    },
    //搜索
    onSearch() {
      debounce(() => {
        this.getList();
      }, 500);
    },
    handleSearch() {
      this.getList();
    },
    //开关
    active_text(value, row) {
      console.log(value, row);
    },
    //跳详情
    goLiveDetail(item) {
      this.$router.push(`/liveDetail/${item.id}`);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.live {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
  padding: 5px 10px;
}
.content {
  background: #fff;
  padding: 10px;
  .content-top {
    display: flex;
    align-items: center;
  }
  .content-bottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 16%;
      padding: 10px;
      img {
        width: 100%;
        height: 150px;
      }
      dd {
        line-height: 15px;
        p:nth-child(2) {
          display: flex;
          justify-content: space-between;
          color: #ccc;
        }
        p:nth-child(3) {
          display: flex;
          justify-content: space-between;
          color: #1890ff;
        }
      }
    }
  }
}
</style>
